<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>userList</title>
    <link rel="stylesheet" href="bootvue/css/bootstrap.min.css">
    <link rel="shortcut icon" href="#" />
</head>
<body>
<nav class="navbar navbar-default">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">用户管理系统</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">欢迎:xxx</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="app">
    <!--中心布局-->
    <div class="container-fluid">
        <!--搜索框-->
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="searchName">姓名:</label>
                        <input type="text" class="form-control" id="searchName" v-model="searchName"/>
                    </div>
                    <button type="button" class="btn btn-primary" @click="search">搜索</button>
                </form>
            </div>
        </div>
        <!--table-->
        <div class="row" style="margin-top: 20px;">
            <div class="col-md-8">
                <!--用户信息展示-->
                <table class="table table-striped table-bordered table-hover">
                    <tr>
                        <th>编号</th>
                        <th>姓名</th>
                        <th>年龄</th>
                        <th>性别</th>
                        <th>操作</th>
                    </tr>
                    <tbody>
                    <tr v-for="user,index in users">
                        <td>{{user.id}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.age}}</td>
                        <td>{{user.sex == 0 ? '男' : '女'}}</td>
                        <td>
                            <button class="btn btn-danger btn-xs" @click="del(user.id)">删除</button>&nbsp;&nbsp;
                            <button class="btn btn-success btn-xs" @click="findOne(user.id)">修改</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!--添加表单-->
            <div class="col-md-4">
                <form>
                    <div class="form-group">
                        <label for="username">姓名:</label>
                        <input type="text" class="form-control" v-model="user.name" id="username" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="age">年龄:</label>
                        <input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年龄">
                    </div>
                    <div class="form-group">
                        <label for="sex">性别:</label>
                        <input type="text" class="form-control" id="sex" v-model="user.sex" placeholder="请输入性别">
                    </div>
                    <button type="button" class="btn btn-default" @click="saveUser">提交</button>
                    <button type="button" class="btn btn-danger" @click="resetForm">重置</button>
                </form>
            </div>
        </div>
    </div>
</div>
<script src="bootvue/js/vue.js"></script>
<script src="bootvue/js/axios.min.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            users: [],
            user: {},
            searchName:''
        },
        methods: {
            //查询全部用户信息
            findAll() {
                //发送ajax请求，向后台发宋查询全部的请求
                axios.get("/users/user/findAll").then((response) => {
                    console.log(response.data.data);
                    if (response.data.flag) {
                        this.users = response.data.data;
                    } else {
                        alert(response.data.message);
                    }
                });
            },
            //添加用户
            saveUser() {
                axios.post("/users/user/save", this.user).then((response) => {
                    if (response.data.flag) {
                        //添加成功重新查询全部
                        this.findAll();
                        //将表单清空
                        this.user = {};
                    } else {
                        alert(response.data.message);
                    }
                });
            },
            //重置表单
            resetForm(){
                this.user = {};
            },
            //删除用户
            del(id){
                if (window.confirm("确认删除吗?")){
                    //发送ajax
                    axios.get("/users/user/del?id="+id).then((response)=>{
                        if(response.data.flag){
                            alert(response.data.message);
                        }else{
                            alert(response.data.message);
                        }
                    });
                    //重新查询全部
                    this.findAll();
                }
            },
            //查询一个人的信息
            findOne(id){
                axios.get("/users/user/findOne?id="+id).then((response)=>{
                    if(response.data.flag){
                        this.user = response.data.data;
                    }else{
                        alert(response.data.message);
                    }
                });
            },
            //模糊检索
            search(){
                axios.get("/users/user/findBySearch?searchName="+this.searchName).then((response)=>{
                    if(response.data.flag){
                        this.users = response.data.data;
                    }else{
                        alert(response.data.message);
                    }
                });
            }
        },
        created() {
            //页面加载执行查询全部的方法
            this.findAll();
        }
    });
</script>
</body>
</html>